
							
							
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="common-layout">
                    <el-container>
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item style="width:200px;">
                                <el-input v-model="formInline.username" placeholder="用户账号" />
                            </el-form-item>
                            <!-- <el-form-item style="width:100px;">
                                <el-select v-model="formInline.rz" placeholder="认证状态">
                                    <el-option label="未认证" value="no" />
                                    <el-option label="已认证" value="yes" />
                                </el-select>
                            </el-form-item> -->
                            <el-form-item style="width:100px;">
                                <el-select v-model="formInline.state" placeholder="账号状态">
                                    <el-option label="锁定" value="1" />
                                    <el-option label="正常" value="0" />
                                    <el-option label="已注销" value="2" />
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item>
                                <el-col :span="17">
                                    <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date"
                                        style="width: 100%" />
                                </el-col>
                            </el-form-item> -->
                            <el-form-item style="width:80px;">
                                <el-button type="primary" @click="reset">重置</el-button>
                            </el-form-item>
                            <el-form-item style="width:80px;">
                                <el-button type="success" @click="select">查询</el-button>
                            </el-form-item>
                        </el-form>

                    </el-container>
                </div>
            </el-header>
            <el-main>
                <div class="common-layout">
                    <el-container style="display: block;">
                        <el-table :data="tableData" style="width: 100%" empty-text="暂无数据"
                            :header-cell-style="{ background: '#EFF0FD', color: '#606266' }">
                            <el-table-column label="ID" prop="id" width="50" />
                            <el-table-column label="用户信息" prop="nickName"   show-overflow-tooltip />
                            <el-table-column prop="userId" label="用户账号"  show-overflow-tooltip />
                            <el-table-column prop="money" label="账户余额"   show-overflow-tooltip />
                            <!-- <el-table-column prop="number" label="数字藏品" width="220" /> -->
                            <!-- <el-table-column prop="infor" label="所属邀请" width="100" /> -->
                            <el-table-column prop="state" label="账号状态"   show-overflow-tooltip />
                            <!-- <el-table-column prop="date" label="时间" width="220" /> -->
                        </el-table>
                        
                        <div class="bar">
                            <span>总计 <span class="number">{{formInline.count}}</span> 条数据</span>
                            <el-pagination :page-size="formInline.pageSize" v-model:current-page="formInline.currentPage" layout="prev, pager, next"  
                            :total="formInline.count"  @current-change="select" />
                        </div>

                    </el-container>
                </div>
            </el-main>
        </el-container>
    </div>


</template>
                            
<script>
export default {
    name: 'userList',

    data() {
        return {
            formInline: {
                username: '',
                state:'',
                currentPage: 1,
                pageSize: 3,
                count: 1
            },

            userpage:[],
            tableData:[],

        };
    },

    mounted() {
this.select();
    },

    methods: {
        handleSizeChange() {
            this.reset();
        },
        handleCurrentChange() {
            this.reset();
        },
        reset() {
            this.formInline = {
                user: '',
                order: '',
                status: '',
                date: ''
            }
        },
        select() {
            console.log(this.formInline.state);
            let that = this;
            this.$http.post('user/selectByCondition', that.formInline)
                .then(function (response) {
                    console.log(response);
                    that.tableData = response.data.records;
                    that.formInline.count = response.data.count;
                    that.formInline.pageSize = response.data.pageSize

                    // for (let i = 0; i < that.tableData.length; i++) {
                    //     if (that.tableData[i].w_type == 0) {
                    //         that.tableData[i].w_type = "审核中"
                    //     } else if (that.tableData[i].w_type == 1) {
                    //         that.tableData[i].w_type = "已通过"
                    //     } else if (that.tableData[i].w_type == 2) {
                    //         that.tableData[i].w_type = "已拒绝"
                    //     }
                    // }

                })
                .catch(function (error) {
                    console.log(error);
                })

        },
    },
};
</script>
                            
<style lang="css" scoped>
.el-main {
    padding: 0 !important;
}

.el-header {
    height: 50px;
    padding-left: 0;
}


.el-aside {
    overflow: hidden;
}

.el-form-item {
    margin-right: 10px;
}

.flex {
    margin-top: 20px;
}

/* 下方数据 */
.bottom-header {
    height: 370px;

}

.el-table {
    margin-top: 20px;
    box-shadow: 0 0 5px rgb(195, 206, 217);
}

.bottom-bar {
    border-top: 1px solid silver;
}

.el-pagination {
    float: left;
    margin-top: 10px;
}

.bottom-bar>span {
    margin-top: 16px;
    display: inline-block;

}
.bar {
    border-top: 1px solid silver;
    line-height:56px;
}
.number{
    color: red;
}

</style>